<template>
  <div class="layout-wrapper">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-container">
        <div class="header-left">
          <div class="logo" @click="$router.push('/home')">
            <el-icon class="logo-icon"><Reading /></el-icon>
            <span class="logo-text">惠学阁</span>
          </div>
          
          <nav class="main-nav">
            <div 
              v-for="item in navItems" 
              :key="item.path"
              :class="['nav-item', { active: activeMenu === item.path, hidden: item.hidden }]"
              @click="handleMenuSelect(item.path)"
            >
              <el-icon><component :is="item.icon" /></el-icon>
              <span class="nav-text">{{ item.text }}</span>
            </div>
          </nav>
        </div>

        <div class="header-right">
          <!-- 用户菜单 -->
          <div class="user-section" v-if="isLoggedIn">
            <el-dropdown @command="handleUserCommand" trigger="hover">
              <div class="user-avatar">
                <el-avatar :size="32" :src="userInfo?.profilePicture">
                  <el-icon><UserFilled /></el-icon>
                </el-avatar>
                <span class="username">{{ userInfo?.username }}</span>
                <el-icon class="dropdown-icon"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    <span>个人中心</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="favorites">
                    <el-icon><StarFilled /></el-icon>
                    <span>我的收藏</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>
                    <span>设置</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="logout" divided>
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          <!-- 登录按钮 -->
          <div class="auth-buttons" v-else>
            <el-button @click="$router.push('/login')" class="login-btn">
              登录
            </el-button>
            <el-button type="primary" @click="$router.push('/register')" class="register-btn">
              注册
            </el-button>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <div class="content-wrapper">
        <router-view />
      </div>
    </main>

    <!-- 底部 -->
    <footer class="footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-section">
            <div class="footer-logo">
              <el-icon class="footer-logo-icon"><Reading /></el-icon>
              <span class="footer-logo-text">惠学阁</span>
            </div>
            <p class="footer-desc">优质学习资源共享平台</p>
          </div>
          
          <div class="footer-section">
            <h4 class="footer-title">快速链接</h4>
            <ul class="footer-links">
              <li><a href="#" @click.prevent="$router.push('/home')">首页</a></li>
              <li><a href="#" @click.prevent="$router.push('/resources')">学习资源</a></li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h4 class="footer-title">关于我们</h4>
            <ul class="footer-links">
              <li><a href="#">联系我们</a></li>
              <li><a href="#">使用条款</a></li>
              <li><a href="#">隐私政策</a></li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h4 class="footer-title">联系方式</h4>
            <p class="contact-info">邮箱: contact@huixuege.com</p>
            <p class="contact-info">电话: 400-123-4567</p>
          </div>
        </div>
        
        <div class="footer-bottom">
          <div class="copyright">
            <span>© 2024 惠学阁 - 优质学习资源平台. 保留所有权利.</span>
          </div>
          <div class="footer-slogan">
            <span>让学习变得更简单</span>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  HomeFilled,
  FolderOpened,
  UserFilled,
  Setting,
  User,
  ArrowDown,
  SwitchButton,
  Reading,
  StarFilled
} from '@element-plus/icons-vue'

export default {
  name: 'Layout',
  components: {
    HomeFilled,
    FolderOpened,
    UserFilled,
    Setting,
    User,
    ArrowDown,
    SwitchButton,
    Reading,
    StarFilled
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const route = useRoute()

    const activeMenu = ref('')

    // 页面挂载时恢复用户状态
    onMounted(async () => {
      try {
        const { restoreAuthState } = await import('@/utils/auth')
        const result = await restoreAuthState('frontend')
        
        if (result.success) {
          console.log('前台用户状态恢复成功:', result.message)
        } else {
          console.log('前台用户状态恢复失败:', result.message)
          // 前台页面不强制登录，所以不显示错误信息
        }
      } catch (error) {
        console.error('恢复前台用户状态时出错:', error)
      }
    })

    // 导航菜单项
    const navItems = computed(() => [
      {
        path: '/home',
        text: '首页',
        icon: 'HomeFilled',
        hidden: false
      },
      {
        path: '/resources',
        text: '学习资源',
        icon: 'FolderOpened',
        hidden: false
      }
    ])

    // 计算属性
    const isLoggedIn = computed(() => store.getters.getLoginStatus)
    const userInfo = computed(() => store.getters.getUserInfo)

    // 监听路由变化，更新激活菜单
    watch(
      () => route.path,
      (newPath) => {
        activeMenu.value = newPath
      },
      { immediate: true }
    )

    // 处理菜单选择
    const handleMenuSelect = (index) => {
      router.push(index)
    }



    // 处理用户命令
    const handleUserCommand = async (command) => {
      switch (command) {
        case 'profile':
          router.push('/user/profile')
          break
        case 'favorites':
          router.push('/user/favorites')
          break
        case 'settings':
          router.push('/user/settings')
          break
        case 'logout':
          try {
            await ElMessageBox.confirm(
              '确定要退出登录吗？',
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }
            )
            
            store.dispatch('logout')
            ElMessage.success('已退出登录')
            router.push('/home')
          } catch {
            // 用户取消操作
          }
          break
      }
    }

    return {
      activeMenu,
      navItems,
      isLoggedIn,
      userInfo,
      handleMenuSelect,
      handleUserCommand
    }
  }
}
</script>

<style scoped>
/* 整体布局 */
.layout-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
}

/* 头部导航 */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 8px 12px;
  border-radius: 12px;
  flex-shrink: 0;
}

.logo:hover {
  background: rgba(64, 158, 255, 0.08);
  transform: translateY(-1px);
}

.logo-icon {
  font-size: 32px;
  color: #409eff;
}

.logo-text {
  background: linear-gradient(45deg, #409eff, #667eea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.main-nav {
  display: flex;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  font-weight: 500;
  position: relative;
}

.nav-item:hover {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
  transform: translateY(-1px);
}

.nav-item.active {
  background: linear-gradient(45deg, #409eff, #667eea);
  color: white;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.nav-item.hidden {
  display: none;
}

.nav-text {
  font-size: 14px;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}





.user-section {
  position: relative;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(64, 158, 255, 0.05);
}

.user-avatar:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: translateY(-1px);
}

.username {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-icon {
  font-size: 12px;
  color: #909399;
  transition: transform 0.3s ease;
}

.auth-buttons {
  display: flex;
  gap: 12px;
}

.login-btn {
  border-radius: 20px;
  padding: 8px 20px;
  border: 1px solid #409eff;
  color: #409eff;
  background: transparent;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background: #409eff;
  color: white;
  transform: translateY(-1px);
}

.register-btn {
  border-radius: 20px;
  padding: 8px 20px;
  background: linear-gradient(45deg, #409eff, #667eea);
  border: none;
  transition: all 0.3s ease;
}

.register-btn:hover {
  background: linear-gradient(45deg, #337ecc, #5a6fd8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.content-wrapper {
  width: 100%;
  min-height: 100%;
}

/* 底部 */
.footer {
  background: #2c3e50;
  color: white;
  margin-top: auto;
}

.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px 20px;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-section h4 {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #ecf0f1;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-logo-icon {
  font-size: 28px;
  color: #409eff;
}

.footer-logo-text {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(45deg, #409eff, #667eea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-desc {
  color: #bdc3c7;
  font-size: 14px;
  line-height: 1.6;
}

.footer-title {
  color: #ecf0f1;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #bdc3c7;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #409eff;
}

.contact-info {
  color: #bdc3c7;
  font-size: 14px;
  margin-bottom: 8px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #34495e;
  font-size: 14px;
}

.copyright {
  color: #95a5a6;
}

.footer-slogan {
  color: #409eff;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-container {
    padding: 0 20px;
  }
  
  .content-wrapper {
    padding: 0 20px;
  }
  
  .footer-container {
    padding: 30px 20px 15px;
  }
  
  .search-input {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 16px;
    height: 56px;
  }
  
  .header-left {
    gap: 20px;
  }
  
  .main-nav {
    gap: 4px;
  }
  
  .nav-item {
    padding: 8px 12px;
  }
  
  .nav-text {
    display: none;
  }
  
  .search-input {
    width: 180px;
  }
  
  .username {
    display: none;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  
  .content-wrapper {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .header-container {
    padding: 0 12px;
  }
  
  .header-left {
    gap: 16px;
  }
  
  .logo {
    gap: 8px;
    font-size: 20px;
  }
  
  .logo-icon {
    font-size: 24px;
  }
  
  .search-input {
    width: 140px;
  }
  
  .auth-buttons {
    gap: 8px;
  }
  
  .login-btn,
  .register-btn {
    padding: 6px 16px;
    font-size: 13px;
  }
  
  .content-wrapper {
    padding: 0 12px;
  }
}
</style> 